<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>回收站</title>
		<link rel="stylesheet" href="/baseAdmin/pear/css/pear.css" />
	</head>
	<body class="pear-container">
		<!--数据表格-->
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="article_table" lay-filter="article_table"></table>
			</div>
		</div>

		<!--新增/删除-->
		<script type="text/html" id="user-toolbar">
<!--			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="recover">-->
<!--		        <i class="layui-icon layui-icon-engine"></i>-->
<!--		        恢复-->
<!--		    </button>-->
		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
		        <i class="layui-icon layui-icon-delete"></i>
		        删除
		    </button>
		</script>

		<!--表格操作-编辑/删除-->
		<script type="text/html" id="article-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="see"><i class="layui-icon layui-icon-radio"></i>预览</button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="recover"><i class="layui-icon layui-icon-engine"></i>恢复</button>
		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i>删除</button>
		</script>

		<script src="/baseAdmin/layui/layui.js"></script>
		<script src="/baseAdmin/pear/pear.js"></script>
		<script src="/plugins/jquery/jquery-3.4.1.min.js"></script>
		<script src="/layuimini/js/lay-module/layuimini/miniTab.js" charset="utf-8"></script>
		<script>
			$(function() {

			});

			layui.use(['table', 'form', 'jquery','common','laydate','miniTab'], function() {
				let table = layui.table;
				let layer = layui.layer;
				let form = layui.form;
				let miniTab = layui.miniTab;
				let laydate = layui.laydate;
				let $ = layui.jquery;
				let common = layui.common;

				//渲染日期组件
				laydate.render({
					elem: '#date',
					range: '~'
				});
				//创建表头
				let cols = [[
					{type: "checkbox", width: 50},
					{field: 'id', width: 80, title: 'ID', sort: true, hide: true},
					{field: 'title', width: 300, title: '标题'},
					{field: 'content', minWidth: 200, title: '内容预览'},
					{field: 'totalView', width: 150, title: '阅读量', sort: true},
					{field: 'commentNum', width: 150, title: '评论数', sort: true},
					{field: 'createTime', width: 200, title: '创作时间', sort: true},
					{title: '操作', width: 300, toolbar: '#article-bar', align: "center"}
				]]
				//渲染表格
				table.render({
					elem: '#article_table',
					url: '/system/article/garbageList',
					page: true,
					cols: cols,
					skin: 'line',
					toolbar: '#user-toolbar',
					method:"post",
					contentType: 'application/json',
					response: {
						statusCode: 200     //规定成功的状态码，默认：0
					},
					defaultToolbar: [{
						title: '刷新',
						layEvent: 'refresh',
						icon: 'layui-icon-refresh',
					}, 'filter', 'print', 'exports']
				});

				table.on('tool(article_table)', function(obj) {
					if (obj.event === 'remove') {
						window.remove(obj);
					} else if (obj.event === 'see') {
						window.see(obj);
					} else if (obj.event === 'recover') {
						window.recover(obj);
					}
				});
				table.on('toolbar(article_table)', function(obj) {
					if (obj.event === 'recover') {
						window.recover();
					} else if (obj.event === 'refresh') {
						window.refresh();
					} else if (obj.event === 'batchRemove') {
						window.batchRemove(obj);
					}
				});

				form.on('submit(user-query)', function(data) {
					table.reload('article_table', {
						where: data.field
					})
					return false;
				});
				form.on('switch(user-enable)', function(obj) {
					layer.tips(this.value + ' ' + this.name + '：' + obj.elem.checked, obj.othis);
				});

				window.recover = function(obj) {
					layer.confirm('确定恢复该文章?,', {icon: 3, title: '提示'}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url:"/system/article/recoverArticleByIds?ids="+obj.data.id , // 请求路径
							type:"get" , //请求方式
							success:function (data) {
								layer.close(loading);
								if (data.code == 200) {
									table.reload('article_table');
								} else {
									layer.msg(data.message);
								}
							},//响应成功后的回调函数
							error:function () {
								alert("出错啦...")
							},//表示如果请求响应出现错误，会执行的回调函数
						});
					});

				}

				window.see = function(obj) {

					//Todo
				}
				window.remove = function(obj) {
					layer.confirm('确定永久删除该文章?,', {icon: 3, title: '提示'}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url:"/system/article/deleteArticleByIds?ids="+obj.data.id , // 请求路径
							type:"get" , //请求方式
							success:function (data) {
								layer.close(loading);
								if (data.code == 200) {
									table.reload('article_table');
								} else {
									layer.msg(data.message);
								}
							},//响应成功后的回调函数
							error:function () {
								alert("出错啦...")
							},//表示如果请求响应出现错误，会执行的回调函数
						});
					});
				}
				window.batchRemove = function(obj) {
					var checkIds = common.checkField(obj,'id');
					if (checkIds === "") {
						layer.msg("未选中数据", {
							icon: 3,
							time: 1000
						});
						return false;
					}
					layer.confirm('确定永久删除这些文章吗?', {icon: 3, title: '提示'}, function(index) {
						layer.close(index);
						let loading = layer.load();
						$.ajax({
							url:"/system/article/deleteArticleByIds?ids="+checkIds , // 请求路径
							type:"get" , //请求方式
							success:function (res) {
								layer.close(loading);
								if (res.code == 200) {
									table.reload('article_table');
								} else {
									layer.msg(res.message);
								}
							},//响应成功后的回调函数
							error:function () {
								alert("出错啦...")
							},//表示如果请求响应出现错误，会执行的回调函数
						});
					});
				}
				window.refresh = function(param) {
					table.reload('article_table');
				}

			})
		</script>
	</body>
</html>
